<h3 class="mb-4">{{ theme === 1 ? 'Environment' : (theme === 2 ? 'Social' : 'Governance')}}</h3>
<div *ngIf="performanceSummary" class="d-flex flex-row align-items-stretch shadow">
    <div class="card col-4 stacked-card left-card">
        <div class="card-body">
            <h5>Score</h5>
            <span class="current-rating">{{ performanceSummary.overall.score | number: '1.0-0' }}</span>
            <span class="max-rating">/100</span>
        </div>
    </div>
    <div class="card col stacked-card middle-card">
        <div class="card-body">
            <h5>Weight</h5>
            <span class="pillar-current-rating">{{ formatIssueWeight(performanceSummary.weight.weight) | number: '1.0-0' }}</span>
            <span class="pillar-max-rating">%</span>
        </div>
    </div>
    <div class="card col stacked-card middle-card">
        <div class="card-body">
            <h5>Relative Position</h5>
            <span class="pillar-current-rating">{{ performanceSummary.relative.comparativeGroupRank }}</span>
            <span class="pillar-max-rating">/{{ performanceSummary.relative.comparativeGroupSize }}</span>
        </div>
    </div>
    <div class="card col stacked-card right-card">
        <div class="card-body">
            <h5>Percentile</h5>
            <span class="pillar-current-rating">{{ performanceSummary.percentile.comparativeGroupPercentileRank }}</span>
            <span class="pillar-max-rating">{{ getPercentileOrdinal() }}</span>
        </div>
    </div>
</div>

<div *ngIf="esgHistoricalPerformanceSummary" class="card-group shadow mb-5">
    <div class="card card-body bottom-card">
        <div linearChart [chartID]="'historicalPerformanceOverallChart'" [chartData]="overallChartData" [showCategoryNames]="false"
            [showLegend]="true" class="row">
            <div id="historicalPerformanceOverallChart" style="height:200px; width:100%;"> </div>
        </div>
    </div>
</div>

<!-- Clusters -->
<esg-cluster *ngFor="let cluster of clusters" [cluster]="cluster" [companyId]="companyId" [theme]="theme"></esg-cluster>